<template>
    <my-div :day_bg="bgcolor" class="head" style="margin-bottom:20" :style="{'height':(height+statusBarHeight)+'px'}">
        <div class="status-bar" :style="{'height': statusBarHeight}"></div>
        <div  class="layout"  :style="{'height': height}">
                <div style="flex-direction: row;">
                    <my-text :text='title' style="flex: 1;text-align: center;font-size: 36;" @click="titleClick"></my-text>
                </div>
                <div  class="backbg" :style="{'height': height}" @click="leftClick">
                    <text v-if="left"></text>
                    <slot name="left"></slot>
                </div>
                <div  class="backbg" v-if="back" @click="backTo" :style="{'height': height}">
                    <image src="root:img/wallet/fanhui@2x.png" style="width: 18px;height: 30px;"></image>
                </div>
                <div  @click="rightClick"
                        :style="{'height': height}"
                        style="width: 200px;position: absolute;right: 30px;align-items: center;flex-direction: row-reverse;">
                    <slot name="right"></slot>
                </div>
        </div>
        <!--<div v-if="!hideBottomLine"-->
             <!--style="height: 1;background-color: #cccccc;position: absolute;bottom: 0;left: 0;right: 0">-->
        <!--</div>-->

        <!--<image src="root:img/shadow.png" style="height: 50;width:750; position: absolute;left: 0;bottom: 0;"></image>-->
    </my-div>
</template>
<script>

    export default {
        props: {
            title: {
                default: ''
            },
            back: {
                default: true
            },
            left:{
                default:''
            },
            titleColor:{
                default:'#333333'
            },
            hideBottomLine: {
                default: false
            },

            bgcolor: {
                default: '#ffffff'

            },
            autoback: {
                default: true
            },
            isloading: {
                default: false
            },
            disabled: {

                default: false
            },

            type: {
                type: String,
                default: 'text'
            },
            font_size: {
                default: 20
            },
            height: {
                default: 88
            },
            top: {
                default: 40
            },
            titletop: {
                default: 10
            }


        },
        data () {
            return {
                statusBarHeight:50
            }
        },
        methods: {
            titleClick()
            {
                this.$emit('titleClick');
            },
            rightClick()
            {
                this.$emit('rightClick');
            },
             leftClick(){
                this.$emit('leftClick');
            },
            backTo()
            {
                if(this.autoback)
                {
                    var nav = weex.requireModule("navigator");
                    nav.back();
                    return;
                }
                this.$emit('backClick');
            },

            onclick()
            {
                if (!this.disabled)
                    this.$emit('onclick');
            },
           
            adjust()
            {
                var nav = weex.requireModule("navigator");
                nav.enableBackGesture()
                const env = weex.requireModule('env')
                if (weex.config.env.platform == 'android') {
                    this.statusBarHeight = 54
                }
                // if(env.isFringeScreen()){
                //     this.statusBarHeight = 56
                // }
            }


        },

        created: function () {


            this.adjust();

        },
        ready: function () {


        },

    }
</script>
<style scoped>
    .head{
       position: relative;
       z-index: 1;
    }
    .backbg {
        width: 180;
        position: absolute;
        left: 0;
        height: 90px;
        justify-content: center;
        margin-left: 30px;
        z-index: 2;
        
    }

    .backbg:active {

    }

    .layout {
        /*position: fixed;*/
        /*top: 0;*/
        /*left: 0;*/
        width: 750;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }


</style>